<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		body {
			padding: 0;
			margin: 0;
			padding-bottom: 40px;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		section {
			width: 600px;
		}

		img {
			width: 60%;
			display: block;
		}

		.text {
			width: 475px;
			color: #333;
			font-size: 14px;
		}

		.btn {
			color: dodgerblue;
			cursor: pointer;
		}

		.text::before {
			content: '';
			float: right;
			width: 0;
			height: calc(100% - 20px);
		}

		.content {
			display: flex;
		}

		.text1 {
			width: 475px;
			color: #333;
			font-size: 14px;
		}

		.text1::before {
			content: '';
			float: right;
			height: 100%;
			margin-bottom: -20px;
		}

		.btn1 {
			float: right;
			clear: both;
			margin-right: 8px;
			color: dodgerblue;
			cursor: pointer;
		}

		.text2 {
			display: -webkit-box;
			overflow: hidden;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
		}

		#exp {
			visibility: hidden;
			position: absolute;
		}

		#exp:checked+.text2 {
			-webkit-line-clamp: 999;
			/*设置一个足够大的行数就可以了*/
		}
		 .btn2::after{
		    content:'展开'
		  }
		  #exp:checked+.text2 .btn2::after{
		    content:'收起'
		  }
	</style>
	<body>
		<img src="img/1.png" />
		<section>
			<p>
				局右： float: right
				局下：.text::before
				高度塌陷：无法实现
			</p>
			<div class="text">
				<label class="btn">展开</label>
				<span>
					汴京发生了一宗离奇命案，众捕头全无头绪，一人出现了，大家登时欣喜若狂，来者正是被誉为大宋第一聪明人，
					这两年屡破奇案的人！他，就是公孙策！公孙策没辜负众望，瞬间已抓出真凶！屡破奇案的大宋第一聪明人，不该是包拯吗？
					为什么会变成了公孙策？原来包拯已失踪两年多了！两年前，包拯忽接到一封信，便急急离开家园，之后便音讯全无！这些年里，
					每当有奇案发生，公孙策便会赶赴现场，目的，其实是为了寻找包拯！宋、辽边境仍频有冲突。当年宋太祖杯酒释兵权，令宋人尚文轻武，
					至国力日弱。这些年，幸得庞太师之子庞统领兵力抗，辽人才愿意和谈！</span>
			</div>
		</section>

		<section>
			<p>
				包一层 flex 布局。因为在 flex 布局的子项中，可以通过百分比来计算变化高度，因此，
				这里需要给 .text 包裹一层，然后设置 display: flex
			</p>
			<div class="content">
				<div class="text1">
					<label class="btn1" for="exp">展开</label>
					<span>
						汴京发生了一宗离奇命案，众捕头全无头绪，一人出现了，大家登时欣喜若狂，来者正是被誉为大宋第一聪明人，
						这两年屡破奇案的人！他，就是公孙策！公孙策没辜负众望，瞬间已抓出真凶！屡破奇案的大宋第一聪明人，不该是包拯吗？
						为什么会变成了公孙策？原来包拯已失踪两年多了！两年前，包拯忽接到一封信，便急急离开家园，之后便音讯全无！这些年里，
						每当有奇案发生，公孙策便会赶赴现场，目的，其实是为了寻找包拯！宋、辽边境仍频有冲突。当年宋太祖杯酒释兵权，令宋人尚文轻武，
						至国力日弱。这些年，幸得庞太师之子庞统领兵力抗，辽人才愿意和谈</span>
				</div>
			</div>
		</section>
		<section>
			<p>
				多行文本溢出省略效果
			</p>
			<div class="content">
				<div class="text1 text2">
					<label class="btn1" for="exp">展开</label>
					<span>
						汴京发生了一宗离奇命案，众捕头全无头绪，一人出现了，大家登时欣喜若狂，来者正是被誉为大宋第一聪明人，
						这两年屡破奇案的人！他，就是公孙策！公孙策没辜负众望，瞬间已抓出真凶！屡破奇案的大宋第一聪明人，不该是包拯吗？
						为什么会变成了公孙策？原来包拯已失踪两年多了！两年前，包拯忽接到一封信，便急急离开家园，之后便音讯全无！这些年里，
						每当有奇案发生，公孙策便会赶赴现场，目的，其实是为了寻找包拯！宋、辽边境仍频有冲突。当年宋太祖杯酒释兵权，令宋人尚文轻武，
						至国力日弱。这些年，幸得庞太师之子庞统领兵力抗，辽人才愿意和谈</span>
				</div>
			</div>
		</section>
		<section>
			<p>
				如何实现 展开 和 收起 的状态切换
			</p>
			<div class="content">
				<input type="checkbox" id="exp" />
				<div class="text1 text2">
					<label class="btn1 btn2" for="exp"></label>
					<span>
						汴京发生了一宗离奇命案，众捕头全无头绪，一人出现了，大家登时欣喜若狂，来者正是被誉为大宋第一聪明人，
						这两年屡破奇案的人！他，就是公孙策！公孙策没辜负众望，瞬间已抓出真凶！屡破奇案的大宋第一聪明人，不该是包拯吗？
						为什么会变成了公孙策？原来包拯已失踪两年多了！两年前，包拯忽接到一封信，便急急离开家园，之后便音讯全无！这些年里，
						每当有奇案发生，公孙策便会赶赴现场，目的，其实是为了寻找包拯！宋、辽边境仍频有冲突。当年宋太祖杯酒释兵权，令宋人尚文轻武，
						至国力日弱。这些年，幸得庞太师之子庞统领兵力抗，辽人才愿意和谈</span>
				</div>
			</div>
		</section>
	</body>
</html>
